<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="pageTitle">个人中心</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<!-- 内容区背景图 -->
			<view class="page_bg" :style="'top:' + touHeight + 'px'"><image :src="URL+'/JD_wx_img/pageTop_bg02.png'" mode="widthFix"></image></view>
			<view class="panel">
				<view class="panel_top">
					<view class="panel_xinxi">
						<view class="avatar" :style="'background: #E85426 url('+avatarUrl+') center center no-repeat;'"></view>
						<view class="xinxi_box">
							<view class="name">{{username==''?nickName:username}}</view>
							<view class="text_btn">
								<view class="old">{{age ? age : ''}}岁</view>
								<view class="gender nan" :style="gender==1?'display:inline-block;':'display:none;'"></view>
								<view class="gender nv" :style="gender==2?'display:inline-block;':'display:none;'"></view>
								<view class="real">{{real==1?'已实名':'未实名'}}</view>
							</view>
						</view>
					</view>
					<view class="panel_right" @tap="toRealName">实名认证</view>
				</view>
				<view class="panel_bottom">
					<view class="resume">我的简历</view>
					<view class="perfect" @tap="toPerfect" :class="resume==1?'active':''">{{resume==1?'查看':'去完善'}}</view>
				</view>
				<view class="swith_business" @tap="swithShangjia"><image :src="URL+'/JD_wx_img/swith_img.png'" mode="widthFix"></image>切换到商家版</view>
			</view>
			<view class="my_wallet">
				<view class="wallet_left">
					<view class="name">我的钱包</view>
					<view class="jiage">￥<view class="yuan">{{money}}</view></view>
				</view>
				<view class="drawal" @tap="toDrawal">去提现</view>
			</view>
			<view class="work_dingdan">
				<view class="work_top">
					<view class="name">我的工作订单</view>
					<view class="drawal" @tap="toOrder">查看全部订单</view>
				</view>
				<view class="dingdan_box" @tap="toOrderDetails" :style="type_text==''?'display:none;':'display:block;'" :data-id="order_id">
					<view class="dingdan_list">
						<view class="list_top">
							<view class="name">{{type_text}}</view>
							<view class="state" :class="status==1?'state01':'state02'">{{status==1?'已报名，待确认':'进行中'}}</view>
						</view>
						<view class="dingdan_xinxi orange" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img01.png) left center no-repeat;">{{arrival}}</view>
						<view class="dingdan_xinxi" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jiu_name_img.png) left center no-repeat;">{{name}}</view>
						<view class="dingdan_xinxi" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img02.png) left center no-repeat;">{{location}}</view>
					</view>
					<view class="punch"><image :src="URL+'/JD_wx_img/punch_img.png'" mode="widthFix"></image>打卡签到</view>
				</view>
			</view>
			<button open-type="contact" class="contact">联系客服</button>
		</view>
		<!-- 公共导航部分 -->
		<view class="tarbar">
			<view class="nav_link" @click="gotoIndex">
				<view class="icon icon_1"></view>
				<text class="text">首页</text>
			</view>
			<view class="nav_link on_cor" @click="gotoMy">
				<view class="icon icon_2"></view>
				<text class="text">我的</text>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				touHeight: 0,
				//域名拼接
				URL: app.globalData.URL,
				avatarUrl: '',
				nickName: '',//微信昵称
				username: '',//真实姓名
				real: '',//是否实名
				gender: '',//性别
				resume: '',//简历是否完善
				money: '',//用户余额Id
				order_id:'',//订单
				type_text: '',//岗位名称
				status:'',//订单状态
				arrival: '',//到岗时间
				name: '',//酒店名称
				location: '',//到岗地点
				get_resume:'',//缓存里的简历是否完善：1是，2否
				get_real:'',//缓存里的是否实名:1=已实名,2=未实名
				get_gender:'',//缓存里的男女
				age: false //年龄
			}
		},
		onShow(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			
			var userinfo = uni.getStorageSync('userinfo');
			that.nickName = userinfo.nickName//获取缓存里的微信名称
			that.avatarUrl = userinfo.avatarUrl//获取缓存里的微信头像
		    
			//登录后返回的字段
			var login = uni.getStorageSync('login');
			that.username = login.username;//真实姓名
			that.real = login.real;//是否实名:1=已实名,2=未实名
			that.gender = login.gender;//性别：1男，2女，3未知
			that.resume = login.resume;//简历是否完善：1是，2否
			that.money = login.money;//用户余额
			that.hotel_real = login.hotel_real;//酒店是否认证：1是,2否
			if(uni.getStorageSync('resume')){
				that.resume = uni.getStorageSync('resume')//表单操作后改变的简历是否完善：1是，2否
			}
			if(uni.getStorageSync('real')){
				that.real = uni.getStorageSync('real')//表单操作后改变的是否实名:1=已实名,2=未实名
			}
			if(uni.getStorageSync('gender')){
				that.gender = uni.getStorageSync('gender')//表单操作后改变的男女
			}
			if(uni.getStorageSync('age')){
				that.age = uni.getStorageSync('age')//表单操作后改变的男女
			}
			//订单接口
			uni.request({
				url: app.globalData.URL + '/api/v1/User/clock',
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res) {
					if(res.data.code==1){
						that.order_id = res.data.data.id//订单id
						that.type_text = res.data.data.type_text//岗位名称
						that.status = res.data.data.status//订单状态
						that.arrival = res.data.data.arrival//到岗时间
						that.name = res.data.data.name//酒店名称
						that.location = res.data.data.location//到岗地点
					}				
				}
			})
		},
		methods: {
			// 页面底部跳转
			gotoIndex:function(){
				uni.redirectTo({
				    url: '/pages/index/index',
				});
			},
			gotoMy:function(){
				uni.redirectTo({
				    url: '/pages/user_my_center/user_my_center',
				});
			},
			//end
			
			//跳转订单列表
			toOrder:function(){
				uni.navigateTo({
				    url: '/pages/my_work_order/my_work_order',
				});
			},
			
			//跳转订单详情
			toOrderDetails:function(e){
				var order_id = e.currentTarget.dataset.id;
				uni.navigateTo({
				    url: '/pages/my_work_order/order_details/order_details?order_id='+order_id,
				});
			},
			
			//跳转实名认证
			toRealName:function(){
				uni.navigateTo({
				    url: '/pages/real_name/real_name',
				});
			},
			
			//跳转我的简历
			toPerfect:function(){
				uni.navigateTo({
				    url: '/pages/resume/resume',
				});
			},
			
			//跳转提现
			toDrawal:function(){
				uni.showModal({
					title: '提示',
					content: '开发中，敬请期待',
					showCancel: false,
					confirmColor:'#93533E',
				})
				// uni.navigateTo({
				//     url: '/pages/withdrawal/withdrawal',
				// });
			},
			
			//切换到商家
			swithShangjia(){
				var that = this;
				var hotel_real = that.hotel_real;
				if(hotel_real==1||uni.getStorageSync('hotel_real')==1){
					uni.redirectTo({
					    url: '/pages/business_my_center/business_my_center',
					});
				}else{
					uni.navigateTo({
					    url: '/pages/jiudian_renzheng/jiudian_renzheng',
					});
				}
			}
		}
	}
</script>

<style>
	.panel{
		position: relative;
		z-index: 10;
		background: #fff;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		border-radius: 32rpx;
		margin-top: 50rpx;
	}
	.panel_top{
		position: relative;
		border-bottom: 2rpx solid #eee;
		padding-bottom: 26rpx;
	}
	.panel_xinxi{
		padding-left: 30rpx;	
	}
	.avatar{
		width: 140rpx;
		height: 140rpx;
		border: 10rpx solid #fff;
		border-radius: 50%;
		float: left;
		margin-top: -35rpx;
		background-size: cover!important;
	}
	.xinxi_box{
		padding-left: 170rpx;
		padding-top: 20rpx;
	}
	.xinxi_box .name{
		font-weight: 900;
		font-size: 44rpx;
		color: #333333;
	}
	.xinxi_box .text_btn{
		margin-top: 15rpx;
	}
	.xinxi_box .text_btn .old{
		display: inline-block;
		font-size: 28rpx;
		color: #888888;
	}
	.xinxi_box .text_btn .real{
		display: inline-block;
		background: linear-gradient(180deg, #FAA04D 0%, #FACF4D 100%);
		width: 104rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 24rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		margin-left: 5px;;
	}
	.panel_right{
		position: absolute;
		right: 20rpx;
		bottom: 26rpx;
		width: 170rpx;
		height: 56rpx;
		line-height: 56rpx;
		border: 2rpx solid #E85426;
		box-sizing: border-box;
		border-radius: 32rpx;
		color: #E85426;
		font-size: 24rpx;
		text-align: center;
	}
	.panel_right:before{
		content: '';
		display: inline-block;
		width: 24rpx;
		height: 24rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/renzheng_img.png) center center no-repeat;
		background-size: 24rpx 24rpx;
		vertical-align: middle;
		position: relative;
		top: -2rpx;
		margin-right: 10rpx;
	}
	.panel_bottom{
		overflow: hidden;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0px 30rpx;
		padding-right: 0rpx;
	}
	.panel_bottom .resume{
		font-size: 28rpx;
		color: #333333;
		float: left;
		padding-left: 58rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jianli_img.png) left center no-repeat;
		background-size: 48rpx 48rpx;
	}
	.panel_bottom .perfect{
		width: 120rpx;
		text-align: right;
		font-size: 24rpx;
		color: #F02A2A;
		float: right;
		padding-right: 60rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/sanjiao_img3.png) right 20rpx center no-repeat;
		background-size: 40rpx 40rpx;
	}
	.panel_bottom .perfect.active{
		color: #888888;
	}
	.my_wallet{
		position: relative;
		z-index: 10;
		background: #fff;
		-webkit-box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		-webkit-border-radius: 32rpx;
		border-radius: 32rpx;
		padding: 30rpx 0rpx;
		margin-top: 30rpx;
		overflow: hidden;
	}
	.my_wallet .name{
		color: #333333;
		font-size: 24rpx;
		background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/wallet_img.png) left center no-repeat;
		background-size: 32rpx 32rpx;
		padding-left: 42rpx;
	}
	.wallet_left{
		float: left;
		padding-left: 30rpx;
	}
	.my_wallet .jiage{
		color: #333333;
		font-weight: 900;
		font-size: 28rpx;
		margin-top: 16rpx;
	}
	.my_wallet .yuan{
		display: inline-block;
		font-size: 44rpx;
	}
	.work_top .drawal{
		margin-top: 0px;
	}
	.punch{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #E85426;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.punch image{
		display: inline-block;
		vertical-align: middle;
		width: 32rpx;
		position: relative;
		top: -3rpx;
		margin-right: 10rpx;
	}
	.contact{
		position: relative;
		box-shadow: 0px 8rpx 20rpx rgba(169, 63, 28, 0.1);
		border-radius: 32rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: left;
		padding: 0rpx 100rpx;
		margin-top: 30rpx;
		background:#fff url(https://jianzhi.huanyuweizhi.com/JD_wx_img/contact_img.png) left 40rpx center no-repeat;
		background-size: 48rpx 48rpx!important;
		z-index: 10;
		color: #333333;
		font-size: 28rpx;
	}
	.contact::after{
		display: none;
	}
	.contact::before{
		content: '';
		position: absolute;
		top: 0px;
		display: block;
		width: 40rpx;
		height: 100%;
		background:url(https://jianzhi.huanyuweizhi.com/JD_wx_img/sanjiao_img3.png) center center no-repeat;
		background-size: 40rpx 40rpx!important;
		right: 15px;
		z-index: 10;
	}
	.swith_business{
		width: 218rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: #3079DC;
		border-radius: 50rpx 50rpx 0rpx 50rpx;
		text-align: center;
		position: absolute;
		right: 0px;
		top: -32rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.swith_business image{
		width: 24rpx;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top: -2rpx;
		margin-right: 10rpx;
	}
</style>
